<template>
    <div>
        <table>
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" @click="!checkAll?checkedData=filterData:checkedData=[]" :value="checkAll" v-model="checkAll" >全选
                    </td>
                    <td>商品</td>
                    <td>单价（元）</td>
                    <td>数量</td>
                    <td>小记（元）</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in filterData" :key="item.id">
                    <td><input type="checkbox" v-model="checkedData" :value="item" @change="checked.length==filterData.length?checkAll=!checkAll:checkAll=false"></td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="item.count--">-</button>
                        <input type="text" :value="item.count">
                        <button @click="item.count++">+</button> 
                    </td>
                    <td>{{ item.price*item.count }}</td>
                    <td><button @click="item.count=0">删除</button></td>
                </tr>
            </tbody>
        </table>
        <span @click="dele">批量删除&nbsp;</span><span>共{{filterData.length}}件商品&nbsp;</span><span>已选择{{checked.length}}件商品</span> 
        <span>合计（不含运费）：{{sumFriut}}元</span>
    </div>

</template>

<script setup>
import { ref,reactive,computed } from 'vue';
const checkAll = ref(false)
const checkedData = ref([])

function dele(){
    const data = filterData.value.filter(item=>{
        return !checked.value.some(items=>items.id==item.id)
    })
    checkedData.value=[]
    productData.value = data
}
const productData = ref([
    {id:1,name:"苹果",price:10,count:2},
    {id:2,name:"香蕉",price:20,count:1},
    {id:3,name:"栗子",price:15,count:5},
    {id:4,name:"李子",price:12,count:8}
])

const filterData = computed(()=>{
    return productData.value.filter(item=>item.count>0)
})

const checked = computed(()=>{
    return checkedData.value.filter(item=>item.count>0)
})

const sumFriut = computed(()=>{
    return checked.value.reduce(((prev,item)=>item.price*item.count+prev),0)
})


</script>

<style scoped>

</style>